<template>
  <div class="student">
    <div class="head">
      <div class="head-left">考勤管理</div>
      <div class="head-right">
        <el-date-picker
          v-model="ruleForm.date"
          @blur="courselist"
          value="data"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
        <div class="form">
          <el-select
            class="sel"
            v-model="ruleForm.courseid"
            @change="courselist"
            placeholder="请选择课程"
            clearable
          >
            <el-option
              v-for="item in courseData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-input
            class="imput"
            placeholder="请填写学员姓名"
            @blur="courselist"
            v-model="ruleForm.name"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-top">
        <div class="title">今日考勤</div>
        <div class="check">
          <el-checkbox @change="changeAllChecked()">全选</el-checkbox>
          <el-button class="elbtn" @click="dialogsignin = true" type="primary"
            >考勤</el-button
          >
        </div>
      </div>
      <div class="main-footer">
        <div class="footer-row" v-for="item in tableData" :key="item.id">
          <el-checkbox
            v-model="item.checkbox"
            @change="itemCheck(item)"
          ></el-checkbox>
          <div style="display: flex; align-items: center">
            <img src="../../assets/student.gif" alt="" />
            <span class="name">{{ item.assistantname }}</span>
          </div>
          <div class="classcourse">
            {{ (item.companyid = 1 ? "一对一排课" : "班课") }}
          </div>
          <div class="book-course">
            <span class="icon iconfont icon-kaifa"></span>
            <span>{{ item.coursename }}</span>
          </div>
          <div class="book-course">
            <span class="icon iconfont icon-linedesign-04"></span>
            <span>{{ item.starttime }} - {{ item.endtime }}</span>
          </div>
          <div class="book-course">
            <span class="icon iconfont icon-xueshimao-shi"></span>
            <span>{{ item.studentname }}</span>
          </div>
          <div class="right">
            <div>
              <span class="icon iconfont icon-dibudaohanglan-"></span>
              <span>{{ item.checkedName }}</span>
            </div>
            <div>
              <span class="icon iconfont icon-icon"></span>
              <el-button
                type="text"
                @click="
                  dialogsignin = true;
                  signin(item.id);
                "
                >签到</el-button
              >
            </div>
          </div>
        </div>
        <el-dialog title="签到" v-model="dialogsignin" width="30%">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="">
              <el-radio-group v-model="form.checked">
                <el-radio
                  @click="hour = false"
                  label="未签到"
                  value="0"
                  checked
                ></el-radio>
                <el-radio
                  @click="hour = false"
                  label="出勤"
                  value="1"
                ></el-radio>
                <el-radio
                  @click="hour = false"
                  label="迟到"
                  value="2"
                ></el-radio>
                <el-radio
                  @click="hour = true"
                  label="请假"
                  value="3"
                ></el-radio>
                <el-radio
                  @click="hour = true"
                  label="旷课"
                  value="4"
                ></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否扣课时" v-show="hour">
              <el-radio-group v-model="form.consumed">
                <el-radio label="是" value="1" checked></el-radio>
                <el-radio label="否" value="0"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="">
              <el-input type="textarea" v-model="form.remarks"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="
                  dialogVisible = false;
                  signin('form');
                "
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      data: new Date(),
      ruleForm: {
        name: "",
        courseid: "",
        date: "",
      },

      hour: false,
      checkboxAll: false,
      form: {
        checked: "",
        consumed: "",
        remarks: "",
      },
      dialogsignin: false,
      tableData: [],
      courseData: [],
    };
  },
  created() {
    this.attendancelist();
    this.courselist();
  },
  methods: {
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      console.log("submit!");
    },
    changeAllChecked: function () {
      if (this.checked) {
        this.checkedNames = this.checkedArr;
      } else {
        this.checkedNames = [];
      }
    },
    // itemCheck(item) {
    //   // 当子选项全选中时 全选按钮也要选中 反之则不选中
    //   var arrTrue = []; // 定义两个空数组 当子选项是选中的状态则放入arrTrue数组中反之放进arrFalse里
    //   var arrFalse = [];
    //   this.tableData.forEach((item) => {
    //     if (item.chekcbox) {
    //       arrTrue.push(item.chekcbox);
    //     } else {
    //       arrFalse.push(item.chekcbox);
    //     }
    //   });
    // },
    // 考勤列表数据
    async attendancelist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/coursetables/checked",
        { params: this.ruleForm }
      );
      console.log(res);
      this.tableData = res.data.list;
      console.log(this.tableData);
    },
    // 执行考勤
    async signin(id) {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/coursetables/updateState",
        { params: { id: id } }
      );
      console.log(res);
    },
    // 课程列表数据
    async courselist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/list"
      );
      console.log(res);
      this.courseData = res.data.list;
      console.log(this.courseData);
    },
  },
  watch: {
    checkedNames: function () {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
};
</script>

<style scoped>
.student {
  min-width: 950px;
  margin-left: 2%;
  background-color: #fff;
}
.head {
  height: 46px;
  display: flex;
}
.head .head-left {
  width: 90px;
  line-height: 46px;
  text-align: left;
}
.head .head-right {
  width: 100%;
  background-color: #f1f2f6;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 20px;
}
.el-button {
  font-size: 12px;
  height: 30px;
}
.form {
  width: 365px;
  height: 30px;
  display: flex;
  align-items: center;
}
.sel,
.imput {
  margin-left: 10px;
  width: 50%;
}
.main {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
}
.main .main-top {
  float: left;
}
.main .main-top .title {
  margin: 20px 165px 0 0;
}
.main .check {
  margin-top: 16px;
  margin-left: 30px;
}
.main .check .elbtn {
  width: 150px;
  height: 40px;
  background-color: #4385f5;
  font-size: 17px;
  margin-left: 15px;
}

.main .main-footer .footer-row {
  height: 72px;
  width: 95%;
  min-width: 1100px;
  float: left;
  margin-top: 20px;
  padding-left: 29px;
  line-height: 72px;
  border: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .main-footer .footer-row .el-checkbox {
  margin-right: 24px;
}
.main .main-footer .footer-row img {
  width: 31px;
  height: 31px;
  margin-right: 10px;
}
.main .main-footer .footer-row > span {
  width: 100px;
  text-align: left;
}
.main .main-footer .footer-row .classcourse {
  line-height: 20px;
  background-color: #c6eae0;
  color: #2acd72;
  margin-left: 15px;
  margin-right: 31px;
  padding: 5px 10px;
}
.main .main-footer .footer-row .book-course {
  margin-right: 42px;
}
.main .main-footer .footer-row .book-course span {
  margin-right: 10px;
}
.main .main-footer .footer-row .right {
  width: 150px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .main-footer .footer-row .right div span {
  margin-right: 10px;
}
.main .main-footer .footer-row .right div:nth-child(2) {
  color: #4381fa;
}
@font-face {
  font-family: "iconfont"; /* Project id 2651078 */
  src: url("//at.alicdn.com/t/font_2651078_j8jiwn4j5z.woff2?t=1625465326425")
      format("woff2"),
    url("//at.alicdn.com/t/font_2651078_j8jiwn4j5z.woff?t=1625465326425")
      format("woff"),
    url("//at.alicdn.com/t/font_2651078_j8jiwn4j5z.ttf?t=1625465326425")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dibudaohanglan-:before {
  content: "\e62c";
}

.icon-icon:before {
  content: "\e609";
}

.icon-kaifa:before {
  content: "\e618";
}

.icon-linedesign-04:before {
  content: "\e66e";
}

.icon-xueshimao-shi:before {
  content: "\e665";
}
</style>
